<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel ="shortcut icon" type="image/x-icon" href="uiautomator1.png">
    <title></title>
    <link rel="stylesheet" href="./codemirror-5.58.1/lib/codemirror.css" />
    <link rel="stylesheet" href="./codemirror-5.58.1/theme/dracula.css" />
    <style>
    </style>
</head>

<body>
    <textarea class="form-control" id="code" name="code"></textarea>
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="./codemirror-5.58.1/lib/codemirror.js"></script>
    <script src="./codemirror-5.58.1/mode/python/python.js"></script>
    <script>
        // import qs from "qs";
        // import axios from 'axios'
		// import Vue from 'vue'
        new Vue({
            el: '#code',
            data: {
                source_code: '',
                title: ''
            },
            methods: {
                manyValues: function () {
                    var url = window.location.search
                    var param = {}, key, value
                    // console.log(url)
                    url = decodeURI(url)
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        // var key=new Array(strs.length);
                        // var value=new Array(strs.length);
                        for (i = 0; i < strs.length; i++) {
                            [key, value] = strs[i].split("=")
                            console.log(key)
                            console.log(value)
                            param[key] = value
                            // value[i]=unescape(strs[i].split("=")[1]); 
                            // alert(param);
                            // console.log(param)
                        }
                    }
                    return param
                }
            },
            created() {
                id = this.manyValues().id
                axios.defaults.baseURL = 'http://10.51.40.30:5000'
                axios
                    .get(
                        `/testscript/get_detail_by_id?id=${id}`,
                        // `id=${id}`
                    )
                    .then(res => {
                        var data = res.data.data;
                        this.source_code = data.source_code
                        this.title = data.title
                        let myTextarea = document.getElementById('code');
                        this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
                            mode: 'python',//编辑器语言
                            theme: 'dracula', //编辑器主题
                            styleActiveLine: true,
                            tabSize: 10,
                            lineWrapping: true,
                            readOnly:"nocursor",
                            smartIndent: true,
                            // scrollbarStyle:"overlay",
                            extraKeys: { "Ctrl": "autocomplete" },//ctrl可以弹出选择项 
                            lineNumbers: true,//显示行号
                        });
                        this.CodeMirrorEditor.setValue(this.source_code)
                        this.CodeMirrorEditor.setCursor(0)
                        document.title = this.title
                    }
                    )
            }
        })
    </script>
</body>

</html>